<template>
    <div v-if="showDialog" class="dialog-container">
        <div class="dialog-box fc-black">
            <div class="close pointer" @click="handleClose">
                <img src="../../assets/closetwo.png" alt="" class="icon-close">
            </div>
            <div class="dialog-content">
                <div class="title text-center fs-18">
                    升级内容
                </div>
                <div class="fc-lightgray mg-t-5">为了提升您的使用体验和数据安全，我们进行了版本升级。</div>
                <div class="fs-16 mg-t-12 mg-b-5"><span class="bold">老用户</span><span class="fc-light">（10月1日之前购买产品的）</span></div>
                <div class="flex mg-b-5">
                    <span class="icon"></span>
                    <div class="bold">
                        <span class="bold">我们将您已添加的成员默认为发薪席位管理员</span>
                    </div>
                </div>
                <div class="flex">
                    <span class="icon"></span>
                    <div class="lh-20">
                        <div>
                            <span class="bold">如果您超过5人或原设置的人员数量后，需要新增成员为发薪席位管理员：则需购买发薪席位</span>或<span class="bold">取消其他成员</span>的发薪<span
                                class="bold">席位管理员身份</span>,并设置该成员为发薪席位管理员，才能正常使用发薪功能。
                        </div>
                    </div>
                </div>
                <div class="fs-16 bold mg-t-12 mg-b-5">新用户</div>
                <div class="flex">
                    <span class="icon"></span>
                    <div class="bold">
                        <span class="bold">我们赠送5个发薪席位</span>
                    </div>
                </div>
                <div class="hint-box fc-lightgray mg-t-12 lh-20">
                    请注意，管理员需要在<span class="bold fc-black">团队管理-席位管理</span>中设置成员为发薪席位管理员，该成员才能正常使用发薪功能。感谢您的理解和配合！
                </div>
                <div v-if="!isOpenSalary" class="button-box flex flex-jc-c mg-t-16 gap-10">
                    <div class="btn-1 bold pointer" @click="handleClose">以后再说</div>
                    <div class="btn-2 bold pointer" @click="handleOpen">立即开通</div>
                </div>
                <div v-if="isOpenSalary" class="button-box flex flex-jc-c mg-t-16 gap-10">
                    <div class="btn-2 bold pointer" @click="handleClose">我知道了</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import user from '@/utils/user'
import store from '@/store'
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showDialog: false,
            isOpenSalary: false
        }
    },
    watch: {
        show: {
            handler(newval) {
                console.log(111, newval);
                this.showDialog = newval
            },
            immediate: true
        },
        showDialog(newval) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        handleClose() {
            this.showDialog = false
            localStorage.setItem('showSeatDialog', true)
        },
        handleOpen() {
            this.handleClose()
            this.$store.commit('openRecharge', new Date().getTime())
        }
    },
    async mounted() {
        await user.waitLogin()
        this.isOpenSalary = user.isOpenPaySalary
    }
}
</script>
<style lang="stylus" scoped>
.dialog-container
    position fixed
    left 0
    top 0
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.7)
    z-index 100
.dialog-box
    width 520px
    height 490px
    background url('../../assets/dialog/bg.png') no-repeat
    background-size cover
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    padding 0 24px
.icon-close
    position absolute
    right 18px
    top -30px
    width 36px
    height 36px
.title
    padding-top 115px
    background linear-gradient(#c4daff, #295fff)
    -webkit-background-clip text
    background-clip text
    color transparent
    position relative
    &::before
        position absolute
        content ''
        width 60px
        height 2px
        background linear-gradient(270deg, #295FFF 0%, rgba(41, 95, 255, 0) 100%)
        left 30%
        top 126px
    &::after
        position absolute
        content ''
        width 60px
        height 2px
        background linear-gradient(270deg, rgba(41, 95, 255, 0) 0%, #295FFF 100%)
        right 30%
        top 126px
.icon
    width 12px
    height 12px
    background url('../../assets/dialog/icon-order.png') no-repeat
    background-size cover
    margin-top 4px
    flex-shrink 0
    margin-right 5px
.fc-lightgray
    color #707284
.hint-box
    background #FFF6F6
    padding 7px 10px
    border-radius 12px
.fc-black
    color #000
.lh-20
    line-height 20px
.btn-1
    height 32px
    line-height 32px
    width 112px
    border 1px solid #E8E9EA
    border-radius 16px
    background linear-gradient(to right, #6FB6F8, #0027E8)
    -webkit-background-clip text
    background-clip text
    color transparent
    text-align center
.btn-2
    height 34px
    line-height 34px
    width 114px
    border-radius 16px
    color #fff
    background linear-gradient(257deg, #C0FFE4 -9%, #004CFF 104%)
    // border 1px solid
    // border-image linear-gradient(183deg, rgba(179, 243, 255, 0) 54%, rgba(3, 35, 199, 0) 120%, #6FFFC3 -21%, #FFFFFF 7% )
    text-align center
.fc-light
    color #9497B1
</style>